<template>
	<view class="container">
		<view class="showMessage">
			<view class="userMessage">
				<view class="userhead">
					<img class="img" :src="info.avatarUrl">
				</view>
				<view class="usename">
					{{info.nickName}}
				</view>
				<view class="punlicTime">
					{{info.createTime}}
					<!-- <van-rate
					  :value="info.starLevel"
					  size="18"
					  color="#ffd21e"
					  void-icon="star"
					  void-color="#eee"
					/> -->
				</view>
				<!-- <view class="delete" @click="report">
					举报
				</view> -->
			</view>


			<view @longpress="copy(info.content)" style=" letter-spacing:5upx; margin-left: 20upx; margin-top: 40upx; "
				class="pulish_content">
				{{info.contentText}}
			</view>

			<view style="margin-left: -0upx; height: 100%;" class="usertext" v-show="info.imgList!=null">
				<swiper circular="true" v-if="swiperShow" class="swiper-box" @change="change" :indicator-dots="true"
					indicator-active-color="black" indicator-color="rgba(255,255,255,1)">
					<swiper-item style="display:flex; " v-for="(item ,index) in info.imgList" 
						:key="index">
						<image @click='previewImage(index)'
							style="margin: 0 auto; display: block; text-align: center; width: 750upx;  height: auto; "
							mode="aspectFit" :src="item"></image>
					</swiper-item>
				</swiper>

			</view>
		</view>
		<view class="">
			<comment-eg :bottom="bottom" ref="commentEg" :articleId="contentType"></comment-eg>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import commentEg from '../index/components/comment-eg/comment-eg.vue'
	export default {
		components: {
			'comment-eg':commentEg,
		},
		data() {
			return {
				bottom: {
					isCollect: false,
					isLike: false,
					likeNum: 0,
					commentNum: 0,
					postId: 0
				},
				swiperShow: false,
				contentId: 0,
				contentType:'',
				tmpCommentData: [],
				curCommentId: '',
				info: {
					nickName: '违规用户',
					time: "",
					content: "违规帖子，请遵守规则使用",
					avatarUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnewoss.zhulong.com%2Ftfs%2Fpic%2Fv1%2Ftfs%2FT1EEb_B7dT1RCvBVdK.jpg&refer=http%3A%2F%2Fnewoss.zhulong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658803272&t=3ce58203694ea1b6e5959e079b7ae12e"

				},
				isShowComment: false,
				placeholder: "友善是交流的起点",
				tmpCommentData: [],
				curCommentId: '',
				message: [],
				comment: [],
				image: "https://qingxin-1312270995.cos.ap-guangzhou.myqcloud.com/images%2Flogo.jpg",
				notices: [],

			}
		},
		computed: {
			...mapState(['orderType', 'address']),
		},
		async onLoad(e) {
			this.notices = await this.$api('notices')
			this.contentId = e.merchantId
			this.contentType = e.merchantId +":1"
			this.getContent()
		},
		onReachBottom() {
			console.log("aaa");
			this.$refs.commentEg.reachBottom();
		},
		methods: {
			copy(value) {
				console.log('----------')
				//提示模板
				uni.showModal({
					content: value, //模板中提示的内容
					confirmText: '复制内容',
					success: (res) => { //点击复制内容的后调函数
						//uni.setClipboardData方法就是讲内容复制到粘贴板
						if (res.confirm) {
							uni.setClipboardData({
								data: value, //要被复制的内容
								success: (res) => { //复制成功的回调函数


								}
							});
						}

					}
				});
			},
			previewImage(e) {
				// console.log(e)
				const current = this.info.imgList[e].imgList
				let pic = []
				for (let i = 0; i < this.info.imgList.length; i++) {
					pic.push(this.info.imgList[i].imgList)
				}
				wx.previewImage({
					current,
					urls: pic
				})
			},
			getContent() {
				this.$request('/post/detail?postId=' + this.contentId, {}, 'GET')
					.then(res => {
						console.log(res);
						this.info = res
						if (res.imgList != 0) {
							this.swiperShow = true
						}
						this.bottom.isCollect = res.haveCollect
						this.bottom.isLike = res.haveThumb
						this.bottom.likeNum = res.thumbNum
						

					}).catch(err => {
						// this.info.nickName = "违规用户"
						// this.info.time = "违规用户"
						// this.info.content = "违规帖子，请遵守规则使用"

						console.log(err);
					})
			},
			change(e) {
				this.current = e.detail.current;
				console.log(this.current)
			},
			showPopup() {
				this.isShowComment = true;
				this.show = true;
			},
			onClose() {
				this.isShowComment = false;
			},
			...mapMutations(['SET_ORDER_TYPE']),
			switchOrderType() {
				if (this.orderType === 'takein') {
					uni.navigateTo({
						url: '/pages/addresses/addresses'
					})
				} else {
					this.SET_ORDER_TYPE('takein')
				}
			}
		}
	}
</script>

<style lang="scss">
	// * {
	// 	box-sizing: border-box;
	// }

	swiper {
		width: 750upx;
		height: 750upx;

	}

	.text_content {
		width: 80%;
	}

	swiper-item {
		width: 750upx;
		text-align: center;
	}

	.pulish {
		text-align: center;
		width: 150upx;
		border-radius: 20upx;
		border: 1pt solid grey;
		background-color: #f8f8f8;
		margin-left: 20upx;
	}

	.content_comment {
		/* display: flex; */
		background-color: white;

		height: auto;
		position: relative;
	}

	.comment_title {
		border: #f1f1f1 1pt solid;
		background-color: white;
	}

	.title_name {
		margin-left: 20upx;
	}

	.comment_message {
		/* // position: relative; */
		width: 750upx;
		height: auto;
		border: 1upx solid white;
	}

	.comment_img {
		margin-top: 20upx;
		margin-left: 3%;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		position: absolute;

		/* border: 1upx solid yellow; */
	}

	.comment_name {
		position: absolute;
		margin-left: 120upx;
		margin-top: 20upx;
	}

	.comment_text {
		// margin-top: 40upx;
		width: 20%;
		height: auto;
		margin-top: 60upx;
		margin-left: 120upx;
		width: 80%;

	}

	.text_content {}

	.comment_text_like {
		width: 20upx;
		margin-top: -45upx;
		margin-bottom: 30upx;
		margin-left: 85%;
		/* position: absolute; */
	}

	.comment_text_likeNum {
		color: #646566;
		font-size: 14px;
		height: 30upx;
		width: 50upx;
		margin-left: 50upx;
		margin-top: -40upx;
	}

	.imgview {
		width: 30%;
		display: flex;
	}

	.imgview>img {
		margin-top: 2.5%;
		margin-left: 2.5%;
		width: 100%;
		height: 221upx;
	}

	.content {
		background-color: #f1f3f4
	}

	.showMessage {
		/* position: relative; */
		height: auto;
		margin-top: 15upx;
		/* border: 1px red solid; */
		background-color: white;
	}

	.showMessage_fotter {
		height: 50upx;
		margin-top: 2%;
		/* height: auto; */
		/* border: 1px red solid; */
		/* margin-left: 30%; */
		border-bottom: 0.5px solid #f1f3f4;
		position: relative;
	}

	.like {
		position: absolute;
		margin-left: 10%;
		height: auto;
	}

	.commit {
		position: absolute;
		height: auto;
		margin-left: 45%;
	}

	.more {
		position: absolute;
		height: auto;
		margin-left: 80%;
	}

	.punlicTime {
		font-size: 20upx;
		color: grey;
		position: absolute;
		height: 40upx;
		margin-top: 80upx;
		margin-left: 157upx;
		/* border: 1px red solid; */
	}

	.userMessage {
		/* margin-top: 10upx; */
		position: relative;
		height: 100upx;
		width: 100%;
		/* border: 1px black solid; */
	}

	.userhead {
		position: absolute;
		height: 100upx;
		width: 100upx;
		margin-top: 10upx;
		margin-left: 2.5%;
		border: 1px yellow solid;
		border-radius: 50%;
	}

	.userhead>img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.delete {
		color: grey;
		position: absolute;
		margin-left: 650upx;
		margin-top: 20upx;
	}

	.usename {
		font-size: 20upx;
		position: absolute;
		height: 50upx;
		margin-top: 20upx;
		/* border: 1px red solid; */
		font-size: 40upx;
		margin-left: 155upx
	}

	.usertext {
		width: 100%;
		margin-left: 2.5%;
		margin-top: 20upx;
		/* border: 1px red solid; */
		height: auto
	}

	.userpic {
		/* position: relative; */
		/* border: 1px red solid; */
		margin-left: -2.5%;
		height: auto;
	}

	.userpic>img {
		margin-top: 2.5%;
		margin-left: 2.5%;
		width: 30%;
		height: 221upx;
	}
</style>
